<template>
  <!-- 动态的背景
    1动态的背景图 -->
  <div class="playMusic" :style="{ 'background-image': `url(${activeImage})` }">
    <!-- 布局 -->
    <div class="playMusicStyle"></div>
    <!-- 我们的内容 -->
    <div class="content-box">
      <div class="topname">
        <div class="topname1">{{ songDetail.name }}</div>
        <div class="topname2">{{ arname }}</div>
      </div>
      <div class="isplay">
        <!-- 实现播放和暂停 -->
        <div class="play" v-if="playShow" @click="changePlay(true)">
          <i class="iconfont icon-zantingtingzhi"></i>
        </div>
        <div class="noplay" v-else @click="changePlay(false)">
          <i class="iconfont icon-bofang"></i>
        </div>
        <img :src="activeImage" alt />
        <!-- 音频  autoplayref="audios" :在vue可以通过$refs 获取到这个元素真实dom=>
        -->
      </div>
      <!-- 注意
        （1）样式=》滚动
        （2）歌词处理
        (3) v-for 歌词
        (4)动态给歌词添加效果
            
      -->
      <div class="lyricStyle" ref="lyricStyles">
        <div
          ref="lyricItems"
          class="lyricItem"
          :class="activeIndex == index ? ' lyricActive' : ''"
          v-for="(item, index) in LyricAlist"
          :key="index"
          :data-index="index"
        >
          {{ item.Lyric }}
        </div>
      </div>
      <!-- 有一个搜索和列表 -->
      <div class="serchHlist">
        <div class="left" @click="showPop">
          <i class="iconfont icon-bofangyinle"></i>
          <span>列表</span>
        </div>
        <div class="right">
          <i class="iconfont icon-sousuo"></i>
          <span>搜索</span>
        </div>
      </div>
    </div>
    <!--  弹框-->
    <PopupItem v-if="popShow" @offPopShow="offPopShows"></PopupItem>
  </div>
</template>

<script>
//注意
import { Getlyric, GetSongDetail, songUrl } from "@/http/api/playMusic.js";
import PopupItem from "../components/Popup.vue";
export default {
  data() {
    return {
      playShow: false, //默认显示
      songDetail: {},
      activeImage: "",
      arname: "",
      LyricAlist: [],
      idx: 0,
      activeIndex: 0,
      popShow: false,
      sUrl: "",
    };
  },
  components: {
    PopupItem,
  },
  computed: {
    audios() {
      return this.$store.state.audios;
    },
  },
  //获取到数据
  mounted() {
    // 防抖: 多次触发 只执行最后一次
    // 节流: 一段时间内 只触发一次

    //1获取路由传递的参数 =>this.$route
    //2发送请求获取数据=》写接口方法
    this.GetlyricData(this.$route.query.id);
    this.GetSongDetailData(this.$route.query.id);
    this.getsongUrl(this.$route.query.id);

    this.getStore();
  },
  methods: {
    showPop() {},
    getStore() {
      //调用mutaions中的方法
      this.$store.commit("changeMusicDom", this.$refs.audios);
    },
    // 接收子组件的方法
    offPopShows() {
      // 弹窗隐藏
      this.$store.commit("changeMusicDom", this.$refs.audios);
    },
    //获取歌词
    GetlyricData(id) {
      Getlyric("/lyric", { id }).then((res) => {
        //处理歌词
        this.changeLyric(res.lrc.lyric);
      });
    },
    //处理歌词
    changeLyric(data) {
      //(1)将字符串变成数组
      let LyricA = data.split("\n");
      //(2)处理歌词和和时间=》
      let arryData = []; // [{item:时间，Lyric：歌词}]
      let regMatch = /\d{2}:\d{2}.\d{2,3}/; // =>match   /\\\match
      for (let i = 0; i < LyricA.length - 1; i++) {
        arryData.push({
          time: this.timeFormat(LyricA[i].match(regMatch)[0]),
          Lyric: LyricA[i].split("]")[1],
        });
      }

      this.LyricAlist = arryData; //处理好的歌词数据
    },
    //处理时间格式
    timeFormat(data) {
      let m = parseInt(data.split(":")[0]); //分钟 02
      let s = parseInt(data.split(":")[1]); //miao

      if (m !== "00") {
        s += m * 60;
      }

      return Number(s);
    },
    //获取歌曲详细
    GetSongDetailData(ids) {
      GetSongDetail("/song/detail", { ids }).then((res) => {
        this.songDetail = res.songs[0];
        this.activeImage = res.songs[0].al.picUrl;
        this.arname = res.songs[0].ar[0].name;
        this.$store.commit("addMusicDetail", res.songs[0]);
        this.$store.commit("addMusicBg", res.songs[0].al.picUrl);
      });
    },
    //获取音乐url
    getsongUrl(id) {
      songUrl("/song/url", { id }).then((res) => {
        this.sUrl = res.data[0].url;
        //在页面使用vuex中mutations中定义的方法
        this.$store.commit("setsUrl", res.data[0].url);
      });
    },

    //暂停和播放歌曲
    changePlay(value) {
      this.playShow = !value;
      if (value) {
        //在播放中
        this.audios.pause(); //dom操作 =》pause()
      } else {
        //进行播放
        this.audios.play(); // dom操作 =》play()

        this.audios.addEventListener("timeupdate", this.updateMusic);
      }
    },
    updateMusic() {
      //获取到最新播放到那里
      //处理动态样式和  自动滚动
      this.changeStyleSc(this.audios.currentTime);
    },
    changeStyleSc(time) {
      //(1)动态的添加样式
      // idx默认值0 =》就是第一项
      let item = this.LyricAlist[this.idx];
      //获取到第一项歌词播放的时间
      console.log(item.time, time);
      //获取当前的时间

      if (time > item.time) {
        this.idx++; // 0 1 /因为这个会让 歌词 多执行一个
        this.activeIndex = this.idx - 1;
        //实现自动滚动
        this.autoscroll();
      } else {
        return false;
      }
    },
    autoscroll() {
      if (this.$refs.lyricStyles && this.$refs.lyricStyles.scrollTop) {
        this.$refs.lyricStyles.scrollTop += 16;
      }
    },
  },
  beforeDestroy() {
    this.audios.addEventListener("timeupdate", this.updateMusic);
  },
};
</script>
<style scoped lang="less">
.playMusic {
  height: 100%;

  .playMusicStyle {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    //  filter:blur(30px);

    background: black;
  }

  //内容
  .content-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    .topname {
      margin-top: 80px;
      margin-bottom: 160px;
      .topname1 {
        text-align: center;
        font-weight: 600;
        color: #fff;
      }
      .topname2 {
        margin-top: 40px;
        text-align: center;

        color: #fff;
      }
    }
    .isplay {
      height: 900px;
      width: 900px;
      text-align: center;
      line-height: 900px;
      margin: auto;
      position: relative;
      img {
        height: 100%;
        width: 100%;
        border-radius: 60px;
      }
      .play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        height: 100%;
        width: 100%;
        i {
          font-size: 200px;
        }
      }
      .noplay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        height: 100%;
        width: 100%;
        i {
          font-size: 200px;
        }
      }
    }
    //歌词
    .lyricStyle {
      margin: 80px;
      overflow-y: scroll;
      height: 900px;
      .lyricItem {
        text-align: center;
        color: #fff;
        height: 76px;
        line-height: 76px;
        margin: 10px 0;
      }
      .lyricActive {
        color: red;
      }
    }
    .serchHlist {
      position: fixed;
      right: 100px;
      height: 700px;
      background: #fff;
      border-radius: 60px;
      width: 260px;
      bottom: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 30px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        i {
          font-weight: 600;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        i {
          font-weight: 600;
        }
      }
    }
  }
}
</style>